<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <button id="btn">按钮</button>
  <a href="#" id="link">链接</a>
  <script>
    function replace(){
      // 用链接去替换按钮，剪切的方式，将链接剪切放到按钮的位置
      btn.parentNode.replaceChild(link,btn)
    }
  </script> -->



  <!-- 快速修改 -->
  <p>
    <span>张三</span>
    <button id="btn" onclick="edit(this)">修改</button>
  </p>
  <script>
    function edit(btn) {
      var prevEl = btn.previousElementSibling;
      var parentEl = prevEl.parentElement;
      if (btn.innerText === '修改') {
        var input = document.createElement('input');
        input.value = prevEl.innerText;
        parentEl.replaceChild(input,prevEl);
        input.focus();
        btn.innerText = '保存';
      } else {
        var span = document.createElement('span');
        span.innerText = prevEl.value.trim();
        parentEl.replaceChild(span, prevEl);
        btn.innerText='修改';
      }
    }
  </script>
</body>

</html>